<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery Banner Rotator</title>	
    <style type="text/css">
		/* style used for this preview page only */
		html {
			height:100%;
			background:#EEE;
			background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
			background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
    	}
    	body {
			width:100%;
			height:100%;
			margin:0;
		}
		a, a:visited{
			color:#39c;
			text-decoration:none;
		}
		a:hover{
			text-decoration:underline;
		}
		h1 {
			font-size:15px;
			font-weight:normal;
			color:#B5FF00;
			margin:0;
		}
		.container{
			position:absolute;
			background-color:#fff;
			width:827px;
			height:302px;
			top:50%;
			left:50%;
			margin-top:-151px;
			margin-left:-413px;
			-webkit-box-shadow:0 10px 6px -6px #777;
			-moz-box-shadow:0 10px 6px -6px #777;
	        box-shadow:0 10px 6px -6px #777;
		}
    </style>
    <link rel="stylesheet" type="text/css" href="banner-rotator.css"/>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.banner-rotator.min.js"></script>
	<script type="text/javascript">
	$(document).ready(
	   function() {
		  $('#rotator1').bannerRotator({
				width:'auto',
				height:'auto',
				button_width:24,
				button_height:24,
				margin:4,
				tooltip_width:'auto',
				tooltip_height:'auto',
				auto_start:true,
				delay:5000,
				play_once:false,
				pause_onmouseover:false,
				effect:'random',
				duration:800,
				easing:'swing',
				cpanel_align:'BR',
				outside_cpanel:false,            
				cpanel_onmouseover:false,
				thumb_type:'number',
				select_onmouseover:false,
				tooltip_type:'image',
				tooltip_delay:0,
				dbuttons_type:'small',
				dbuttons_onmouseover:false,
				display_playbutton:true,
				display_timer:true,
				timer_align:'top',
				text_effect:'fade',
				text_duration:500,
				text_easing:'swing',
				text_delay:0,
				text_onmouseover:false,
				text_sync:true,
				center_image:true,
				shuffle:false,            
				mousewheel:true,
				swipe:true,
				block_size:75,
				vslice_size:55,
				hslice_size:50,
				block_delay:25,
				vslice_delay:75,
				hslice_delay:75
		  });
	   }
	);
	</script>
</head>
<body> 
<div class="container">
	<div id="rotator1" class="banner-rotator">
    	<ul>
            <li>
                <a href="images/photo1.jpg" title="photo 1"><img src="images/thumbs/thumb1.jpg" alt=""/></a>
                <a href="http://codecanyon.net/user/webtako?ref=webtako" target="_blank"></a>
                <img src="images/tooltips/tooltip1.jpg" alt="" class="tt-img"/>
                <div class="tt-text">architecture</div>
                <div data-effect='expandDown' data-delay='0' style='top:75px;left:25px;width:0;height:0;background-color:#000;opacity:0.75;'>
                	<span style="font-size:20px">jQuery Banner Rotator</span>               	</div>                        
             	<div data-effect='expandRight' data-delay='400' style='top:125px;left:25px;width:300px;height:0;background-color:#fff;opacity:0.75;'>
                	<span style="font-size:15px;color:#000">This jQuery plugin provides an easy way to create an image slideshow for your site.</span>             	</div>
            </li>
            <li>
                <a href="images/photo2.jpg" title="photo 2"><img src="images/thumbs/thumb2.jpg" alt=""/></a>
                <a href="http://codecanyon.net/user/webtako?ref=webtako" target="_blank"></a>
                <img src="images/tooltips/tooltip2.jpg" alt="" class="tt-img"/>
                <div class="tt-text">3D abstract art</div>
                <div data-effect='expandDown' data-delay='0' style='top:55px;left:45px;width:0;height:0;background-color:#06f;opacity:0.85;'>
                    <span style="font-size:20px;color:#fff">jQuery Banner Rotator</span>                </div>              		
                <div data-effect='expandDown' data-delay='400' style='top:100px;left:45px;width:0;height:0;background-color:#333;opacity:0.85;'>
                    <span style="font-size:15px">40+ transition effects available</span>                </div>              		
                <div data-effect='expandDown' data-delay='800' style='top:134px;left:45px;width:0;height:0;background-color:#0cf;opacity:0.85;'>
                    <span style="font-size:15px">Transition effect can be adjusted per image including transition type, duration, and easing</span>             	</div>
                <div data-effect='expandDown' data-delay='1200' style='top:172px;left:45px;width:0;height:0;background-color:#eee;opacity:0.85;'>
                    <span style="font-size:15px;color:#000">Can set to auto play on startup with customizable time delay for each image.</span>               	</div>
            </li>
            <li>
                <a href="images/photo3.jpg" title="photo 3"><img src="images/thumbs/thumb3.jpg" alt=""/></a>
                <a href="http://codecanyon.net/user/webtako?ref=webtako" target="_blank"></a>
                <img src="images/tooltips/tooltip3.jpg" alt="" class="tt-img"/>
                <div class="tt-text">krazy kartoons</div>
                <div data-effect='moveLeft' style='top:20px;left:20px;width:0;height:0;background-color:#555;'>
                    <span style="font-size:20px;font-weight:bold">jQuery Banner Rotator</span>               	</div>                        
                <div data-effect='moveRight' style='top:71px;left:20px;width:0;height:0;padding:5px;background-color:#0cf;opacity:0.75'>
                   	Add multiple description layers over image             	</div>
                <div data-effect='moveLeft' style='top:104px;left:20px;width:0;height:0;padding:5px;background-color:#fff;opacity:0.75;'>
                    <span style="color:#000">Effect, effect speed, easing, and delay adjustable for each layer</span>          		</div>
                <div data-effect='moveRight' style='top:139px;left:20px;width:0;height:0;padding:5px;background-color:#96f;opacity:0.8;'>
                    Description supports html as well as plain text             	</div>
                <div data-effect='moveLeft' style='top:172px;left:20px;width:0;height:0;padding:5px;background-color:#9F0;opacity:0.75'>
                    Background color, background image, and opacity options for each layer             	</div>
           	</li>
            <li>
                <a href="images/photo4.jpg" title="photo 4"><img src="images/thumbs/thumb4.jpg" alt=""/></a>
                <a href="http://codecanyon.net/user/webtako?ref=webtako" target="_blank"></a>
                <img src="images/tooltips/tooltip4.jpg" alt="" class="tt-img"/>
                <div class="tt-text">rockable press</div>
                <div data-effect='moveRight' data-delay='0' style='top:122px;left:607px;width:160px;height:55px;padding:0;background-color:#131b28;background-image:url(images/jQuery.png);background-position:center center;background-repeat:no-repeat;'></div>
               	<div data-effect='moveRight' data-delay='400' style='top:122px;left:332px;width:160px;height:55px;padding:0;background-color:#000;background-image:url(images/envato.png);background-position:center center;background-repeat:no-repeat;'></div>
                <div data-effect='moveRight' data-delay='800' style='top:122px;left:57px;width:160px;height:55px;padding:0;background-color:#333;background-image:url(images/codecanyon.png);background-position:left center;background-repeat:no-repeat;'></div> 
           	</li>
            <li>
                <a href="images/photo5.jpg" title="photo 5"><img src="images/thumbs/thumb5.jpg" alt=""/></a>   
                <a href="http://codecanyon.net/user/webtako?ref=webtako" target="_blank"></a>
                <img src="images/tooltips/tooltip5.jpg" alt="" class="tt-img"/>
                <div class="tt-text">3D abstract art</div>
                <div data-effect='expandDown' data-delay='0' style='top:15px;left:15px;width:115px;height:107px;padding:15px;background-color:#0cf;opacity:0.95;'>
                    <span style="font-size:22px;font-weight:bold">jQuery Banner Rotator</span>               	</div>
                <div data-effect='expandRight' data-delay='300' style='top:15px;left:170px;width:0;height:0;padding:5px;background-color:#fff;opacity:0.85;'>
                    <span style="color:#333">Many options available for thumbnails</span>          		</div>
                <div data-effect='expandLeft' data-delay='600' style='top:51px;left:170px;width:0;height:0;padding:5px;background-color:#fff;opacity:0.85;'>
                    <span style="color:#333">Thumbnails can display number, text caption, or images</span>             	</div>
                <div data-effect='expandRight' data-delay='900' style='top:87px;left:170px;width:0;height:0;padding:5px;background-color:#fff;opacity:0.85;'>
                    <span style="color:#333">Text or image tooltip available for each thumbnail</span>            	</div>
                <div data-effect='expandLeft' data-delay='1200' style='top:124px;left:170px;width:0;height:0;padding:5px;background-color:#fff;opacity:0.85;'>
                    <span style="color:#333">Thumbnails can be aligned horizontally or vertically, inside or outside of image area</span>            	</div>              
            </li>
            <li>
                <a href="images/photo6.jpg" title="photo 6"><img src="images/thumbs/thumb6.jpg" alt=""/></a>                  
                <a href="http://codecanyon.net/user/webtako?ref=webtako" target="_blank"></a>
                <img src="images/tooltips/tooltip6.jpg" alt="" class="tt-img"/>
                <div class="tt-text">3D objects</div>
                <div data-effect='fade' data-delay='0' style='top:50px;right:18px;width:0;height:0;padding:10px;background-color:#f90;opacity:0.75;'>			
                	<span style="font-size:18px;color:#fff">jQuery Banner Rotator</span>              	</div>
                <div data-effect='fade' data-delay='600' style='top:97px;right:18px;width:0;height:0;padding:10px;background-color:#000;opacity:0.75;'>
                	directional and play buttons allow for easy navigation              	</div>
                <div data-effect='fade' data-delay='200' style='top:137px;right:18px;width:0;height:0;padding:10px;background-color:#000;opacity:0.75;'>
                	able to shuffle images in random order            	</div>                
                <div data-effect='fade' data-delay='800' style='top:177px;right:18px;width:0;height:0;padding:10px;background-color:#000;opacity:0.75;'>
                	support mousewheel scrolling plus mobile device swipe gesture              	</div> 
                <div data-effect='fade' data-delay='400' style='top:217px;right:18px;width:0;height:0;padding:10px;background-color:#000;opacity:0.75;'>
                	timer bar indicates time before rotation              	</div>                                 	                          
            </li>
            <li>
                <a href="images/photo7.jpg" title="photo 7"><img src="images/thumbs/thumb7.jpg" alt=""/></a>        
                <a href="http://codecanyon.net/user/webtako?ref=webtako" target="_blank"></a>
                <img src="images/tooltips/tooltip7.jpg" alt="" class="tt-img"/>
                <div class="tt-text">building</div>  
                <div data-effect='moveLeft' data-delay='0' style='top:30px;left:30px;width:0;height:0;background-color:#c00;opacity:1;'>
                    <span style="font-size:20px;font-weight:bold;">jQuery Banner Rotator</span>             	</div>
                <div data-effect='moveLeft' data-delay='300' style='top:134px;left:30px;width:0;height:0;padding:10px;background-color:#fff;opacity:0.8;'>
                    <span style="color:#000">follow me on <a href="http://codecanyon.net/user/webtako/follow" target="_blank">codecanyon</a></span>              	</div>
                <div data-effect='moveLeft' data-delay='600' style='top:85px;left:30px;width:0;height:0;padding:10px;background-color:#fff;opacity:0.8;'>
                    <span style="color:#000">follow me on <a href="https://twitter.com/webtako" target="_blank">twitter</a></span>              	</div>
                <div data-effect='moveLeft' data-delay='900' style='top:184px;left:30px;width:0;height:0;padding:10px;background-color:#fff;opacity:0.8;'>
                    <span style="color:#000">copyright &copy; 2012 <a href="http://codecanyon.net/user/webtako" target="_blank">webtako</a></span>            	</div>                                                              
            </li>     
            <li>
                <a href="images/photo8.jpg" title="photo 8"><img src="images/thumbs/thumb8.jpg" alt=""/></a>                    
                <a href="http://codecanyon.net/user/webtako?ref=webtako" target="_blank"></a>
                <img src="images/tooltips/tooltip8.jpg" alt="" class="tt-img"/>
                <div class="tt-text">say it in print</div> 
                <div data-effect='moveRight' style='top:0;left:0;width:235px;height:280px;background-color:#000;opacity:0.7;'>
                    <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut orci sapien.</strong>
                    <ul style="color:#ccc;">
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                        <li>Sed accumsan molestie nisi, sed semper est tempor eu.</li>
                        <li>Nullam lacinia ipsum quis est tempus et adipiscing diam ornare.</li>
                        <li>Cras nec tortor rhoncus dui blandit bibendum eget a augue.</li>
                        <li>Quisque at mi in dolor auctor faucibus in et purus.</li>
                    </ul>
                </div>                        
                <div data-effect='moveUp' style='top:87px;left:593px;width:215px;height:0;padding:5px;background-color:#ccc;opacity:0.75;'>
                    <span style="font-size:30px">jQuery Banner Rotator</span>                </div>
                <div data-effect='moveDown' style='top:178px;left:595px;width:0;height:0;padding:10px;background-color:#333;opacity:0.95;'>		
                    <span style="font-size:18px;"><a href="http://codecanyon.net/item/jquery-banner-rotator-slideshow/109046" target="_blank">Purchase Item</a></span>             	</div>                           	                                                	                           
            </li>     
        </ul>
    </div>	
</div>
</body>
</html>
